<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<link rel="stylesheet" type="text/css" href="../../css/bootstrap.css">
	<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=ZCXPWxfUzpReuZYnZWXeXbvq725yGo1I"></script>
	<!--加载鼠标绘制工具-->
	<script type="text/javascript" src="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.js"></script>
	<link rel="stylesheet" href="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.css" />
	<!--加载检索信息窗口-->
	<script type="text/javascript" src="http://api.map.baidu.com/library/SearchInfoWindow/1.4/src/SearchInfoWindow_min.js"></script>
	<link rel="stylesheet" href="http://api.map.baidu.com/library/SearchInfoWindow/1.4/src/SearchInfoWindow_min.css" />
	<script type="text/javascript" src="../../js/jquery.min.js"></script>
	<title>设置电子围栏</title>
	<style type="text/css">
		body,html {
			width: 100%;
			height: 100%;
			margin: 0;
			font-family: "微软雅黑";
		}
		
		#allmap {
			width: 100%;
			height: 400px;
			overflow: hidden;
		}
		
		#result {
			width: 100%;
			font-size: 12px;
		}
	</style>
</head>
<body>
	<div id="allmap" style="overflow: hidden; zoom: 1; position: relative;">
		<div id="map"
			style="height: 100%; -webkit-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out;"></div>
	</div>

	<div style="padding-top: 10px; text-align: center;">
		<input type="hidden" id="xys" />
		<button type="button" onclick="saveOverlayXy();" class="btn btn-danger">保存电子围栏坐标</button>
	</div>
	<br /><br />

	<div id="result" style="display: none;">
		<input type="button" value="获取绘制的电子围栏个数" onclick="alert(overlays.length)" />
		<input type="button" value="清除所有电子围栏" onclick="clearAll()" />
	</div>

	<script type="text/javascript">
		$("#xys").val("");//将电子围栏坐标值设置为空
		// 百度地图API功能
		var map = new BMap.Map("map");
		map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); // 初始化地图,设置中心点坐标和地图级别
		map.addControl(new BMap.MapTypeControl()); //添加地图类型控件
		map.setCurrentCity("北京"); // 设置地图显示的城市 此项是必须设置的
		map.enableScrollWheelZoom(true); //允许缩放地图
		function myFun(result) {
			var cityName = result.name;
			map.setCenter(cityName);
		}

		var myCity = new BMap.LocalCity();
		myCity.get(myFun);

		var overlays = [];
		var overlaycomplete = function(e) {
			overlays.push(e.overlay);
			getXYs(overlays);
		};

		var styleOptions = {
			strokeColor : "red", //边线颜色。
			fillColor : "red", //填充颜色。当参数为空时，圆形将没有填充效果。
			strokeWeight : 3, //边线的宽度，以像素为单位。
			strokeOpacity : 0.8, //边线透明度，取值范围0 - 1。
			fillOpacity : 0.6, //填充的透明度，取值范围0 - 1。
			strokeStyle : 'solid' //边线的样式，solid或dashed。
		}

		//实例化鼠标绘制工具
		var drawingManager = new BMapLib.DrawingManager(map, {
			isOpen : false, //是否开启绘制模式
			enableDrawingTool : true, //是否显示工具栏
			drawingToolOptions : {
				anchor : BMAP_ANCHOR_TOP_RIGHT, //位置
				offset : new BMap.Size(5, 5), //偏离值
				drawingModes : [ BMAP_DRAWING_POLYGON ]
			},
			circleOptions : styleOptions, //圆的样式
			polylineOptions : styleOptions, //线的样式
			polygonOptions : styleOptions, //多边形的样式
			rectangleOptions : styleOptions //矩形的样式
		});

		//添加鼠标绘制工具监听事件，用于获取绘制结果
		drawingManager.addEventListener('overlaycomplete', overlaycomplete);

		//清空电子围栏
		function clearAll() {
			for (var i = 0; i < overlays.length; i++) {
				map.removeOverlay(overlays[i]);
			}
			overlays.length = 0;
			$("#xys").val("");
		}

		//将划出来的电子围栏坐标保存起来
		function getXYs(polygon) {
			if (confirm("确定保存该电子围栏吗?")) {
				var polygonLen = polygon.length;
				if (polygonLen > 1) {
					alert("禁止一次设置多个电子围栏!");
					clearAll();
				} else {
					for (var i = 0; i < polygonLen; i++) {
						var dd = polygon[i].po;
						if (dd.length < 3) {
							alert("该电子围栏范围无效,请重新设置!");
							clearAll();
						}else {
							for (var j = 0; j < dd.length; j++) {
								var lng = dd[j].lng;
								var lat = dd[j].lat;
								$("#xys").val($("#xys").val() + lng + "," + lat + ";");
							}
						}
					}
				}
			} else {
				clearAll();
			}
		}

		//设置电子围栏坐标到主页面上
		function saveOverlayXy() {
			if (overlays.length == 0) {
				alert("未设置电子围栏!");
			} else {
				var xy = $("#xys").val();
				window.parent.setPolygonXy(xy);
			}
		}
	</script>
</body>
</html>
